<template>
    <div class="mainDiv" style="padding: 20px; box-sizing: border-box;">
        <div class="rowHead">
            <el-select v-model="filter.brandid" placeholder="请选择品牌" @change="selbrand">
                <el-option label="请选择品牌" value="0"></el-option>
                <el-option v-for="item in brandlist" :label="item.name" :value="item.id" :key="item.id">
                </el-option>
            </el-select>
            <el-input v-model="filter.keywords" placeholder="请输入关键字" style="width:150px"></el-input>
            <el-button class="filter-item" type="primary" @click="getmsg">搜索</el-button>
        </div>
        <el-table :data="goodslist" height="100%" @row-click="selectRow" :row-class-name="tableRowClassName">
            <el-table-column prop="selected" label="选择" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.selected"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="nums" label="库存"></el-table-column>
            <el-table-column prop="remarks" label="描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isdisabled == 0" type="primary" close-transition>正常</el-tag>
                    <el-tag type="success" close-transition v-else>被弃用</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 5px 0 0 0">
            <el-col :span="12">
                <el-pagination @current-change="changecurrent" :current-page="filter.currentpage" layout="total, prev, pager, next" :total="total" :page-size="filter.pagesize">
                </el-pagination>
            </el-col>
            <el-col :span="12" style="text-align: right">
                <el-button type="danger" size="mini" icon="close" @click="closeWindow">取消关闭</el-button>
                <el-button type="success" size="mini" icon="check" @click="goback">确定选择</el-button>
            </el-col>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'
export default {
  name: 'goodslist',
  data () {
    return {
      goodslist: [],
      brandlist: [],
      selectlist: [],
      total: 0,
      filter: {
        pagesize: 15,
        zt: 0,
        currentpage: 1,
        brandid: '',
        keywords: ''
      }
    }
  },
  async mounted () {
    // 获取品牌列表
    let data = await C.ajax('/organization/popup/getbrandlist', {}, 'post')
    if (data) this.brandlist = data
    this.getmsg()
  },
  methods: {
    changecurrent: function (val) {
      this.filter.currentpage = val
      this.getmsg()
    },
    getmsg: async function () {
      let data = await C.ajax('/organization/popup/getgoodslist', this.filter, 'post')
      if (data) {
        this.total = data.count
        this.checkselect(data.data)
      }
    },
    selbrand: function () {
      this.getmsg()
    },
    selectRow: function (row, event, column) {
      event.preventDefault()
      let key = this.inselectlist(row.id)
      if (key > -1) {
        this.selectlist.splice(key, 1)
        row.selected = false
      } else {
        this.selectlist.push(row)
        row.selected = true
      }
    },
    tableRowClassName: function (row, index) {
      if (row.selected) return 'info-row'
    },
    // 计算是否选择
    checkselect: function (data) {
      data.forEach((row, index) => {
        data[index].selected = this.inselectlist(row.id) > -1
      })
      this.goodslist = data
    },
    inselectlist: function (id) {
      let selectIndexKey = -1
      this.selectlist.forEach((row, index) => {
        if (row.id == id) {
          selectIndexKey = index
        }
      })
      return selectIndexKey
    },
    goback: function () {
      C.closeBrowserWindow(this.selectlist)
    },
    closeWindow: function () {
      C.closewin()
    }
  }
}
</script>
<style>
.info-row {
    background-color: #afe691 !important;
}

.el-table tr:hover {
    cursor: pointer;
}
</style>